<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用Vue指令实现数据展示</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/homeWork2.css">
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div class="box">
			<!-- 头部 -->
			<div class="top">
				<h1>手机</h1>
				<div class="left">
					<a href="#">查看更多</a>
					<img src="img/more.png" >
				</div>
			</div>
			<!-- 头部 end-->
			<div class="box1" id="root">
				<!-- 左边部分 -->
				<img :src="img.src" >
				<!-- 产品部分 -->
				<div class="content">
					<!-- 产品一 -->
					<ul class="content_a">
						<li v-for="phoneList in phoneLists">
							<a :href="phoneList.url">
								<!-- {{phoneList.id}} -->
								<div class="content_img">
									<img :src="phoneList.pic.src" >
								</div>
								<h3 class="title" >{{phoneList.title}}</h3><!-- 手机名 -->
								<p class="desc">{{phoneList.des}}</p>
								<p class="price">{{phoneList.price}}</p><!-- 价格 -->
							</a>
						</li>
					</ul>
					<!-- 产品一 end-->
					<!-- 产品二 -->
					<ul class="content_b">
						<li v-for="teleList in phoneLists2">
							<a :href="teleList.url">
								<!-- {{phoneList.id}} -->
								<div class="content_img1">
									<img :src="teleList.pic.src" >
								</div>
								<h3 class="title1" >{{teleList.title}}</h3><!-- 手机名 -->
								<p class="desc1">{{teleList.des}}</p>
								<p class="price1">{{teleList.price}}</p><!-- 价格 -->
							</a>
						</li>
					</ul>
					<!-- 产品二 end-->
				</div>
				<!-- 产品部分 end-->
			</div>
		</div>
		<script>
		const app=Vue.createApp({
			data(){
				return{
					img:{src:"img/pic1.webp"},//左边图片
					phoneLists:[//产品1数据
						{id:"1",url:'#',pic:{src:'img/pic2.webp'},title:' Redmi 12C',des:'高性能长续航，5000万像素超清双摄',price:'699元起'},
						{id:"2",url:'#',pic:{src:'img/pic3.webp'},title:' Redmi K60',des:'骁龙8+｜2K 高光直屏｜5500mAh+67W闪充',price:'2499元起'},
						{id:"3",url:'#',pic:{src:'img/pic4.webp'},title:' Redmi K60 Pro',des:'第二代骁龙8】狂暴引擎',price:'3299元起'},
						{id:"4",url:'#',pic:{src:'img/pic5.webp'},title:' Redmi Note 12 Pro 极速版',des:'【高通骁龙778G，OLED柔性直屏+一亿像素',price:'1699元起'}
					],
					phoneLists2:[//产品2数据
						{id:"1",url:'#',pic:{src:'img/pic6.webp'},title:' Xiaomi 13 限量定制色',des:'全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头',price:'4999元起'},
						{id:"2",url:'#',pic:{src:'img/pic7.webp'},title:' Xiaomi 13 Pro',des:'全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 2K 专业原色屏｜120W小米澎湃秒充 ｜徕卡75mm长焦镜头',price:'4999元起'},
						{id:"3",url:'#',pic:{src:'img/pic8.webp'},title:' Xiaomi 13',des:'全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头',price:'3299元起'},
						{id:"4",url:'#',pic:{src:'img/pic9.webp'},title:' Redmi Note 12 Pro 极速版',des:'三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量',price:'1199元起'}
					]
				}
			},
			methods:{
				
			}
		});
		const vm=app.mount("#root");
		</script>
		<!-- 209010241 高红芳 -->
	</body>
</html>
